<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/axios/0.26.0/axios.js" type="application/javascript"></script>
    <script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.js" type="application/javascript"></script>
</head>
<body>

    <div id="app">
            <cp1></cp1>
    </div>

        
    
    <script>

        Vue.component('cp1',{
            template:`<div>
                         我是cp1  
                        <div> 关于对象中 使用 $set</div>
                        <div>userInfo:  {{  userInfo }} </div>
                        <button @click="fn1">修改用户信息 $forceUpdate</button>
                        <button @click="fn2">修改用户信息 $set</button>
                        <button @click="fn3"> 给dixon 加钱 </button>
                        <hr />
                        <div> 关于数组中 使用 $set</div>
                        <div> list is {{ list }} </div> 
                        <button @click="changeList"> 修改数组 </button>
                      </div>`,  
            data(){
                return {
                    // Vue的流程 只会对于在data已声明的属性进行劫持
                    userInfo:{
                        name: 'dixon',
                        age: 17
                    },
                    list:[1,2,3,4]
                }
            },
            methods:{
                fn1(){
                    this.userInfo.money = 1000;
                    console.log('this.userInfo',this.userInfo)
                    // 调用 forceUpdate 强制的更新视图
                    this.$forceUpdate(); // force 强制  update更新
                },
                fn2(){
                    // this.$set(要想改的状态，要设置的属性, 值)
                    // 使用$set 可以给一个自定的对象设置一个响应式的属性( 后期这个属性的值发生变化也会引起视图的更新)
                    // 一般用在一个后期添加属性( 一开始在data当中并没有声明 )，并且监听这个属性的变化
                    this.$set(this.userInfo,'money',1000)
                },
                fn3(){
                    this.userInfo.money++;
                    console.log('查看money', this.userInfo.money)
                },
                changeList(){
                    //  数组的操作 只有  push pop shift unshift revers sort splice 会引起视图的更新
                    // vue重新改写了以上的这些方法
         
                    // this.list.push(888)

                    // 直接通过某个索引值来修改数组不会引起视图的更新
                    // this.list[1] = 888;
                    // this.$forceUpdate();

                    // 如果我们需要通过指定的索引值来修改数组 并且希望视图自动更新  那么应该使用$set
                    // this.$set(数组,索引值,值)
                    this.$set( this.list, 4, 888 )
                    console.log('this.list',this.list)
                }
            }
        })

        const app = new Vue({
            // el: '#app'
        })

        // vue实例的 $mount(css的选择器)  等于配置了 el的值
        app.$mount('#app')
     

    </script>

</body>
</html>